#récup-mobile {
    z-index: 900;
    height: 100%;
}

#récup-mobile * {
    overflow: visible;
}

#récup-mobile > div {
    --largeur: 933px;
    --font-size: 26px;

    width: var(--largeur);

    font-size: var(--font-size);

    transition: transform 500ms ease-in-out;
    transform: translateX(0px);
}

#récup-mobile.caché > div {
    transform: translateX(1000px);
}

.super {
    display: grid;

    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
}

.super > * {
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    pointer-events: none;
}

.super > * > * {
    pointer-events: all;
}



#récup-mobile > div .infos {

    padding: 160px 30px 0 30px;

    overflow: visible;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#récup-mobile > div .infos > *:not(button) {
    height: 285px;
    width: 100%;
}

#récup-mobile > div .infos > *:not(button):nth-child(n+2) {
    margin-top: 16px;
}

#récup-mobile .carte {
    
    padding-left: 63px;
    padding-right: 30px;

    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;

    background-color: #D34B34;
}

#récup-mobile .carte > img {
    width: 139px;

    margin-right: 38px;
}

#récup-mobile .carte > .contenu {
    display: flex;
    flex-direction: column;
}

#récup-mobile .carte > .contenu p,
#récup-mobile .carte > .contenu small {
    font: normal 1em 'Roboto';
    color: white;
}

#récup-mobile .carte > .contenu p.sub {
    border-left: 5px solid white;
    padding-left: 7px;
}

#récup-mobile .carte > .contenu small {
    font-size: 0.70em;
}

#récup-mobile .nfc .carte.dos {
    padding-left: 30px;
}

#récup-mobile .nfc .dos p {
    font-size: 0.55em;
}

#récup-mobile .nfc .dos p:nth-child(n+2) {
    margin-top: 5px;
}

#récup-mobile .nfc .face::after,
#récup-mobile .nfc .dos::after {
    content: '?';

    height: 40px;
    width: 40px;

    border-radius: 40px;

    border: 3px solid white;

    position: absolute;

    align-self: flex-end;
    right: 18px;
    bottom: 18px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font: normal 30px 'Hansief Rough';
    color: white;
}

#récup-mobile .nfc .dos::after {
    content: '!';
}

#récup-mobile .mail input {
    height: 40px;
    width: 90%;

    margin: 8px 0;
    border: 0;
    padding: 0px 13px;
    border-radius: 4px;

    box-sizing: border-box;

    background-color: white;

    font: normal 15px 'Roboto';
}
#récup-mobile .mail input.erreur {
    border: 3px solid red;
}

/* === Rotation NFC === */

#récup-mobile .nfc {
    perspective: 2000px;
    display: none;
}

#récup-mobile .nfc .face,
#récup-mobile .nfc .dos {
    transition: transform 500ms;
    transform-style: preserve-3d;

    backface-visibility: hidden;

    overflow: visible;

    user-select: none;
}

/* état initial */
#récup-mobile .nfc .face {
    transform: rotateX(0deg);
}
#récup-mobile .nfc .dos {
    transform: rotateX(180deg);
}

/* état retourné */
#récup-mobile .nfc.retourné .face { transform: rotateX(180deg); }
#récup-mobile .nfc.retourné .dos { transform: rotateX(360deg); }

/* === clavier === */

#récup-mobile > div .clavier {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    transition: transform 300ms ease-in-out;
    transform: translateY(0px);
}

#récup-mobile > div .clavier.caché {
    transform: translateY(600px);
}

#récup-mobile > div .clavier > button {
    height: 40px;

    padding: 0px 18px;

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    background-color: #21232D;
}

#récup-mobile > div .clavier > button > span {
    margin-right: 12px;

    font: normal 25px 'Roboto';
    color: white;
}

#récup-mobile > div .clavier > div {

    height: 424px;
    width: 100%;

    padding: 13px 17px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    background-color: #eaeff0;
}

#récup-mobile > div .clavier .touches {
    flex-grow: 2;

    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: 54px repeat(3, 1fr);

    grid-gap: 12px;
}

#récup-mobile > div .clavier .touches button {
    background-color: #fafcfc;

    font: normal 1.2em 'Roboto';
    color: #3A4346;
}

#récup-mobile > div .clavier .touches button:hover {
    background-color: hsl(205, 60%, 90%);
}

#récup-mobile > div .clavier .touches section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#récup-mobile > div .clavier .contrôles {
    height: 56px;

    margin-top: 14px;
    justify-content: center;
}

#récup-mobile > div .clavier .contrôles > * {
    pointer-events: all;
}

#récup-mobile > div .clavier .contrôles > button:first-child {
    width: 265px;
    background-color: #24A955;

    font: 500 1.1em 'Roboto';
    color: white;

    justify-self: center;
}

#récup-mobile > div .clavier .contrôles > button:last-child {
    width: 174px;
    background-color: #CF0A2C;

    justify-self: flex-end;
}

/* === adaptation petit conteneur === */

#récup-mobile.petit > div {
    --largeur: 693px;
    height: 100%;
    --font-size: 22px;
}

#récup-mobile.petit > div .clavier > div {
    height: 400px;
}

#récup-mobile.petit > div .clavier .contrôles > button:first-child {
    width: 200px
}

#récup-mobile.petit > div .clavier .contrôles > button:last-child {
    width: 130px;
}

#récup-mobile.petit > div .clavier > button > span {
    font-size: 20px;
}

.recup-fermer {
    margin-top: 31px;
    width: 50px;
    height: 50px;
    background-color: #D34B34;
    display: flex;
    justify-content: center;
    align-items: center;
}
.recup-fermer img {
    width: 30px;
}

.arrondi {
    border-radius: 4px;
}